<template>
    <div>
        <h5>路由守卫测试</h5>
        <p>path:{{ $route.path }}</p>
        <p>name:{{ $route.name }}</p>
        <p>query:{{ $route.query }}</p>
        <p>params:{{ $route.params }}</p>

    </div>
</template>

<script>
export default {
    beforeCreate(){
        console.log("GuardChild.vue beforeCreate")
    },
    mounted(){
        console.log("GuardChild.vue mounted")
    },
    // 路由进入前守卫【组件内】
    beforeRouteEnter(to,from,next){
        console.group("GuardChild.vue beforeRouteEnter")
        console.log("to:",to)
        console.log("from:",from)
        console.log("this:",this)
        console.groupEnd()
        // 当守卫执行完成后，在组件实例创建完成后，进行回调执行，此时形参将接收到组件实例对象
        next(function(vm){
            console.log("next延迟方法执行-vm：",vm)
        })
        return true; // 守卫方法中返回true和不定义return结果一样，用于路由正常放行
        // this.$showTip("您无权访问该页面");
        // alert("您无权访问该页面")
        // return false; // 终止路由切换
        // return "/default"; // 路由重定向切换
        // return {
        //     name:"login1"
        // } // 路由重定向切换
    },
    // 路由更新前守卫【组件内】
    beforeRouteUpdate(to,from){
        console.group("GuardChild.vue beforeRouteUpdate")
        console.log("to:",to)
        console.log("from:",from)
        console.log("this:",this)
        console.groupEnd()
    },
    // 路由离开前守卫【组件内】
    beforeRouteLeave(to,from){
        console.group("GuardChild.vue beforeRouteLeave")
        console.log("to:",to)
        console.log("from:",from)
        console.log("this:",this)
        console.groupEnd()
        // return true; // 守卫方法中返回true和不定义return结果一样，用于路由正常放行
        // return false; // 终止路由切换
        // return {
        //     name:"login1"
        // } // 路由重定向在离开守卫中无法调用，程序报错
    },
    unmounted(){
        console.log("GuardChild.vue unmounted")
    }
}
</script>

<style lang="scss" scoped>

</style>